Day6 Project1 - 履歷 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 6

Modern Web

每日1%，你會累趴。系列第 6 篇

Day6 Project1 - 履歷

13th鐵人賽

擎天崗的松阪牛

2021-09-06 17:19:37

936 瀏覽

分享至

補充一點HTML的資訊，HTML從1995年至今已經發展了多個版本，目前主流使用為HTML5，每個版本都會有基本的格式讓瀏覽器能判斷程式的版本，以HTML5為例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

前幾日已經將HTML、CSS、JavaScript做過基本的介紹了，我認為此時最適合做的第一個作品就是個人履歷了，我會撰寫履歷的地方有兩個。

1.104
2.CakeResume

尤其CakeResume的排版方式蠻友善的，可以多利用Chrome的工具當作參考多練習。

首先先創建一個資料夾專門放今天要使用的資料

├── day6
│   ├── cow.jpg
│   ├── day6.css
│   ├── day6.html
│   └── day6.js

接著開始編輯HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script
        src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="day6.css">
    <script src="day6.js"></script>
    <title>My resume</title>
</head>
<body>
    <div class="container">
        <!-- 個人資料 -->
        <div> 
            <h1>About me</h1>
            <ul>
                <li><img src="cow.jpg" width="10%" class="img-circle"></li>
                <li>品種：松阪牛</li>
                <li>來自：擎天崗</li>
                <li>信箱：goodtoeat@expensive.com</li>
            </ul>
        </div>
        <!-- 技能 -->
        <div>
            <h1>Skills</h1>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </div>
        <!-- 經歷 -->
        <div>
            <h1>Experience</h1>
            <ul>
                <li><a href="https://ithelp.ithome.com.tw/articles/10258879">Day1</a></li>
                <li><a href="https://ithelp.ithome.com.tw/articles/10259383">Day2</a></li>
                <li><a href="https://ithelp.ithome.com.tw/articles/10259712">Day3</a></li>
                <li><a href="https://ithelp.ithome.com.tw/articles/10260164">Day4</a></li>
                <li><a href="https://ithelp.ithome.com.tw/articles/10260531">Day5</a></li>
            </ul>

        </div>
        <!-- 作品 -->
        <div>
            <h1>Project</h1>
            <ul>
                <li>比大小</li>
                <div>
                    <label id='home'>主隊的點數:</label>
                    <label id="away">客隊的點數:</label>
                    <label onclick="key()">點我開始比賽</label>
                </div>
            </ul>
        </div>
    </div>
</body>
</html>

JavaScript

function key(dom) {
    let home = Math.floor(Math.random() * 10);
    let away = Math.floor(Math.random() * 10);
    
    document.getElementsByClassName('home')[0].textContent = '主隊點數：' + home;
    document.getElementsByClassName('away')[0].textContent = '客隊點數：' + away;

    setTimeout(function () {
        if (home > away) {
            alert('主隊獲勝')
        } else if (home < away) {
            alert('客隊獲勝')
        } else {
            alert('兩隊平手')
        }
    }, 100);
}

今天的寫到一半沒有存檔關掉再寫一次就到這邊結束了，謝謝觀看的各位，請記得按讚分享開啟小鈴鐺，你的支持會讓按讚數+1。